<script setup lang="ts">
import { NTabPane, NTabs } from 'naive-ui'
import { ref } from 'vue'
import aiDrawInputItem from './aiDrawInputItem.vue'
import aiFace from './aiFace.vue'
import aiBlend from './aiBlend.vue'

const $emit = defineEmits(['drawSent', 'close', 'furnitureSelected', 'requestCanvasImage'])
const drawSent = (d: any) => $emit('drawSent', d)
const furnitureSelected = (f: any) => $emit('furnitureSelected', f)
const requestCanvasImage = (d: any) => $emit('requestCanvasImage', d)
const aiDrawInputItemRef = ref()
</script>

<template>
  <div class="overflow-y-auto bg-[#fafbfc] pt-2 dark:bg-[#18181c] h-full draw-tabs">
    <NTabs type="line" animated default-value="draw">
      <NTabPane name="start" tab="" />
      <NTabPane name="draw" tab="软装一键入户">
        <aiDrawInputItem ref="aiDrawInputItemRef" @draw-sent="drawSent" @close="$emit('close')" @furniture-selected="furnitureSelected" @request-canvas-image="requestCanvasImage" />
      </NTabPane>
      <NTabPane name="face" tab="局部替换">
        <div class="p-4">
          <aiFace />
        </div>
      </NTabPane>
      <NTabPane name="blend" tab="任意改图">
        <div class="p-4">
          <aiBlend @draw-sent="drawSent" />
        </div>
      </NTabPane>
    </NTabs>
  </div>
</template>
